<template>
  <div class="times-empty">
    <h2>
      <span>暂无数据,可以按以下流程</span>
      <el-dropdown @command="handle">
        <el-button size="mini" type="primary">添加课次</el-button>
        <template #dropdown>
          <h2 style="text-indent: 16px; margin-top: 12px">添加课次:</h2>
          <el-dropdown-menu>
            <el-dropdown-item :command="0">从其他计划选择</el-dropdown-item>
            <el-dropdown-item :command="1">批量添加</el-dropdown-item>
            <el-dropdown-item :command="2">空白课次</el-dropdown-item>
            <el-dropdown-item :command="3">阶段测试</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </h2>
    <div class="times-empty-main">
      <ul>
        <li>
          <img src="@/assets/plan/times-step-1.png" alt="1.添加课次">
          <p>1.添加课次</p>
        </li>
        <li>
          <img src="@/assets/plan/times-step-2.png" alt="2.添加知识元/标准讲义">
          <p>2.添加知识元/标准讲义</p>
        </li>
        <li>
          <img src="@/assets/plan/times-step-3.png" alt="3.完成课次添加">
          <p>3.完成课次添加</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
// import store from './../store';
export default {
  setup() {
    const handle = (type) => store.dispatch('add_times', { type, index: 0 });

    return { handle }
  }
}
</script>

<style lang="scss" scoped>
.times-empty {
  padding: 70px 50px 100px;
  h2 {
    margin-bottom: 24px;
    text-align: center;
    span {
      margin: 0 10px;
      color: #333;
      font-size: 20px;
      line-height: 28px;
      font-weight: 500;
      vertical-align: middle;
    }
  }
  .times-empty-main {
    padding: 20px 145px 40px;
    background: #F5F7FA;
    border-radius: 10px;
    position: relative;
    &::after {
      content: '';
      display: block;
      width: 600px;
      height: 7px;
      background: #D1D4E6;
      position: absolute;
      top: 70px;
      left: 50%;
      transform: translateX(-50%);
    }
    ul {
      display: flex;
      li {
        text-align: center;
        &:nth-child(2) {
          margin: 0 auto;
        }
        img {
          display: inline-block;
          position: relative;
          z-index: 1;
        }
        p {
          font-size: 16px;
        }
      }
    }
  }
}
</style>